---
layout: layouts/home.njk
title: Checklist
subtitle: A beginner's guide to digital accessibility.
colorScheme: blue
hero: checklist
eleventyNavigation:
  key: Checklist
  parent: Feature
  order: 6
tags:
  - navprimary
templateClass: template-checklist
---

<div data-content class="l-content">

	<div class="c-wcag-explanation">
		<p>
			This checklist uses <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">The Web Content Accessibility Guidelines (<abbr>WCAG</abbr>)</a> as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.
		</p>
		<p>
			There are three levels of accessibility compliance in the WCAG, which reflect the priority of support:
		</p>

		<div class="c-wcag-explanation__compliance-level">
			<picture aria-hidden="true" class="c-wcag-explanation__icon">
				<source srcset="/img/checklist/wcag-level-a-large.svg" media="(min-width: 900px)" />
				<img alt="" src="/img/checklist/wcag-level-a-small.svg" />
			</picture>
			<p class="c-wcag-explanation__description">
				<strong class="u-font-size-body-medium c-wcag-explanation__conformance-level">A: Essential</strong>
				If this isn't met, assistive technology may not be able to read, understand, or fully operate the page or view.
			</p>
		</div>

		<div class="c-wcag-explanation__compliance-level">
			<picture aria-hidden="true" class="c-wcag-explanation__icon">
				<source srcset="/img/checklist/wcag-level-aa-large.svg" media="(min-width: 900px)" />
				<img alt="" src="/img/checklist/wcag-level-aa-small.svg" />
			</picture>
			<p class="c-wcag-explanation__description">
				<strong class="u-font-size-body-medium c-wcag-explanation__conformance-level">AA: Ideal Support</strong>
				Required for <a href="https://www.w3.org/WAI/policies/">multiple government and public body websites</a>. The A11Y Project strives for AA compliance.
			</p>
		</div>

		<div class="c-wcag-explanation__compliance-level">
			<picture aria-hidden="true" class="c-wcag-explanation__icon">
				<source srcset="/img/checklist/wcag-level-aaa-large.svg" media="(min-width: 900px)" />
				<img alt="" src="/img/checklist/wcag-level-aaa-small.svg" />
			</picture>
			<p class="c-wcag-explanation__description">
				<strong class="u-font-size-body-medium c-wcag-explanation__conformance-level">AAA: Specialized Support</strong>
				This is typically reserved for parts of websites and web apps that serve a specialized audience.
			</p>
		</div>

		<p>
			This checklist targets many, but not all level A and AA concerns. Note that the different levels of WCAG support do not necessarily indicate an increased level of difficulty to implement.
		</p>
	</div>

	<div class="c-content c-content--checklist">
		<h2>
			Success criteria
		</h2>
		<p>
			Each item on this checklist has a corresponding WCAG “success criterion.” Success criterion are the specific, testable rules that power the WCAG, described by a reference number and short title. For example, the rule about text resizing is called <a href="https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html">1.4.4 Resize text</a>.
		</p>
		<p>
			Some accessibility issues may have multiple success criterion apply to them. We have identified the one most relevant for each checklist item.
		</p>
		<h2>
			Does this checklist guarantee my site is accessible?
		</h2>
		<p>
			No. However, addressing the issues called out in this checklist will help improve the experience for everyone who uses your site.
		</p>
		<p>
			The issues this checklist prompts you to check for covers a wide range of disability conditions. There is no such thing as “perfect accessibility” or a site being “100% accessible.” You should be wary of companies and services that make such promises. If you need professional accessibility help, use <a href="{{ '/resources/#professional-help' | url }}">professional accessibility services</a>.
		</p>
	</div>

	<hr class="c-divider" />

	{% for category, content in checklists %}
	{# 6 May 2021: We don't publish our guidelines about SVGs #}
	{% if category !== 'svg' %}
	{% set category = category | capitalize %}
	<section data-checklist-category="{{ category | slug }}">
			<h2 id="{{ category | slug }}" class="c-heading-large">
				{{ category }}
			</h2>
	<p class="c-preface">
		{{ content.preface | safe }}
	</p>
	<div class="c-card__wrapper">
		{% set tasks = content.tasks %}
		{% for task in tasks %}
			{% include "checklist__task.njk" %}
		{% endfor %}
	</div>
	</section>
	{% endif %}
	{% endfor %}


	<h2 id="next-steps" class="c-heading-large">
		Next steps
	</h2>
	<p class="c-preface">
		Remember to periodically check your site to ensure it is still accessible. The A11Y Project also strongly encourages you to verify your testing by <a href="{{ '/resources/#professional-testers' | url }}">hiring a professional tester</a>.
	</p>

	<h2 id="further-reading" class="c-heading-large">
		Further reading
	</h2>
	<p class="c-preface">
		TetraLogical has a good in-depth, yet still <a href="https://tetralogical.com/articles/wcag-primer/">high-level explanation of the <abbr>WCAG</abbr></a>. Check it out if you want to learn more about its history and principles.
	</p>

</div>
